<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 300px;
				background-color: black;
				border: 2px solid red;
				margin-bottom: 20px;
				margin-left: 100px;
				
			}
			.box2{
				width: 100px;
				height: 300px;
				background-color: green;
				/*margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;*/
				margin: 10px 20px 30px 40px;
				/*与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的*/
				/*三个值：margin: 10px(上) 20px（左右） 30px（下）*/
				/*两个值：margin： 10px（上下） 20px(左右)*/
				/*一个值： margin: 10px(上下左右)*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		<div class="box2">
			
		</div>
	</body>
</html>
